<template>
  <div class="service-project">
    <el-row v-if="isShow">
      <el-col :span="8" class="service-project__img" v-for="(item, index) in imgArrt" :key="index" @click.native="openClick(item.url, item.title, item.content)">
        <el-tooltip class="item" effect="dark" :content="item.title" placement="top-end">
          <img :src="item.url"/>
        </el-tooltip>
      </el-col>
    </el-row>
    <el-row class="service-project__spaimg" v-else>
      <el-button type="text" @click="returnGradute">返回</el-button>
      <div>
        <h3>{{imgTitle}}</h3>
      </div>
      <div>
        <img :src="imgUrl"/>
      </div>
      <pre v-html="imgContent"></pre>
    </el-row>
  </div>
</template>

<script>
import api from '../../api';

export default {
  name: 'gradute',
  watch: {
    $route() {
      this.isShow = true;
    }
  },
  data() {
    return {
      isShow: true,
      imgArrt: [],
      imgUrl: '',
      imgTitle: '',
      imgContent: ''
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      api.serviceProInfo({ moduleId: 5 }).then((data) => {
        this.imgArrt = data;
      });
    },
    openClick(url, title, content) {
      this.isShow = false;
      this.imgUrl = url;
      this.imgTitle = title;
      this.imgContent = content;
    },
    returnGradute() {
      this.isShow = true;
    }
  }
};
</script>
<style lang="scss" scoped>
  .service-project {
    &__img {
      transition: all 0.6s;
      margin-top: 40px;
      img:hover {
        transform: scale(1.1);
      }
    }
  }
</style>
